import 'package:flutter/material.dart';
import 'package:flutter_first_station/article/views/article_page.dart';
import 'package:flutter_first_station/guess/guess_page.dart';
import 'package:flutter_first_station/muyu/muyu_page.dart';
import 'package:flutter_first_station/paper/paper_page.dart';

import 'main.dart';

class AppBottomBar extends StatelessWidget {
  final int currentIndex;
  final List<MenuData> menus;
  final ValueChanged<int> onItemTap;

  const AppBottomBar(
      {super.key,
      required this.menus,
      required this.currentIndex,
      required this.onItemTap});

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        backgroundColor: Colors.white,
        onTap: onItemTap,
        currentIndex: currentIndex,
        elevation: 3,
        type: BottomNavigationBarType.fixed,
        iconSize: 22,
        selectedItemColor: Theme.of(context).primaryColor,
        selectedLabelStyle: const TextStyle(fontWeight: FontWeight.bold),
        showUnselectedLabels: true,
        showSelectedLabels: true,
        items: menus.map((e) => _buildItemByMenuData(e)).toList());
  }

  BottomNavigationBarItem _buildItemByMenuData(MenuData menu) {
    return BottomNavigationBarItem(icon: Icon(menu.icon), label: menu.label);
  }
}

class AppNavigation extends StatefulWidget {
  const AppNavigation({super.key});

  @override
  State<AppNavigation> createState() => _AppNavigationState();
}

class _AppNavigationState extends State<AppNavigation> {
  int _index = 0;

  final List<MenuData> menus = const [
    MenuData(label: '猜数', icon: Icons.question_mark),
    MenuData(label: '木鱼', icon: Icons.my_library_music_outlined),
    MenuData(label: '画板', icon: Icons.palette_outlined),
    MenuData(label: '文章', icon: Icons.article_outlined),
  ];

  // 用 PageView 来实现切页面并保活的效果
  final PageController _ctrl = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildContent2(),
      bottomNavigationBar: AppBottomBar(
        menus: menus,
        currentIndex: _index,
        //onItemTap: _onChangePage,
        onItemTap: _onJumpToPage,
      ),
    );
  }

  void _onChangePage(int index) {
    print("_onChangePage");
    _ctrl.jumpToPage(index);
    setState(() {
      _index = index;
    });
  }

  void _onJumpToPage(int index) {
    _ctrl.jumpToPage(index);
  }

  void _onPageChanged(int index) {
    setState(() {
      _index = index;
    });
  }

  // 方式一：页面消失，数据状态也消失
  Widget _buildContent1(int index) {
    switch (index) {
      case 0:
        return const GuessPage(title: "Guess number");
      case 1:
        return const MuYuPage();
      case 2:
        return const PaperPage();
      default:
        return const SizedBox.shrink();
    }
  }

  // 方式二：用 PageView 来实现切页面并保活的效果，在界面混入 AutomaticKeepAliveClientMixin, 并覆写 wantKeepAlive 返回 true
  Widget _buildContent2() {
    return PageView(
      physics: const NeverScrollableScrollPhysics(), // 设置禁止滑动
      onPageChanged: _onPageChanged,
      controller: _ctrl,
      children: const [
        GuessPage(title: 'Guess number'),
        MuYuPage(),
        PaperPage(),
        ArticlePage(),
      ],
    );
  }
}
